<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="委托号">
					<u-input v-model="formData.wtno" />
				</u-form-item>
				<u-form-item label="箱号">
					<u-input v-model="formData.xh" />
				</u-form-item>
			</u-form>

			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSelAll">全选</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSubmit">支付</u-button>
			</view>
		</view>
		<view style="height: 300rpx;">

		</view>
		<view class="empty" style="margin-top: 50rpx;" v-if="list.length==0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="listCon">
			<view class="listItem" v-for="(item, index) in list" :key="index"> 
					<view class="infoCon" @click="selectitem(item)">
						<view class="checkBox">
							<u-checkbox v-model="item.checked"></u-checkbox>
						</view> 
						<view>
							<view class="cellItem">
								<view class="label">
									提单号：
								</view>
								<view class="value">
									{{item.TIDANNO}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									委托号/序号：
								</view>
								<view class="value">
									{{item.WTNO}}  /  {{item.TIDANXH}}
								</view>
							</view> 
							<view class="cellItem">
								<view class="label">
									作业方式：
								</view>
								<view class="value">
									<template v-if="item.WORKWAY=='FOEI'">
										重出空回
									</template>
									<template v-if="item.WORKWAY=='EOFI'">
										空出重回
									</template>
									<template v-if="item.WORKWAY=='EOEI'">
										空出空回
									</template>
									<template v-if="item.WORKWAY=='EITC'">
										空进
									</template>
									<template v-if="item.WORKWAY=='FINO'">
										重进
									</template>
									<template v-if="item.WORKWAY=='FONI'">
										重出
									</template>
									<template v-if="item.WORKWAY=='EONI'">
										空出
									</template>
								</view>
							</view>
							
							<view class="cellItem">
								<view class="label">
									箱号：
								</view>
								<view class="labelTag">
									{{item.XH}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									箱尺：
								</view>
								<view class="value">
									{{item.XC}}{{item.XX}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									箱主：
								</view>
								<view class="value">
									{{item.XGS}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									金额：
								</view>
								<view class="labelTag" v-if="item.XC==20">
									￥ 20 元
								</view>
								<view class="labelTag" v-if="item.XC>20">
									￥ 40 元
								</view>
							</view>
						</view> 
					</view>
			 
			</view>
		</view> 
		<u-select mode="single-column" :list="carCodeList" v-model="carCodeShow" @confirm="carCodeConfirm"
			value-name="TRUCKER_NO" label-name="PLAT_NO"></u-select> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				}, 
				formData: { 
					xh:'',
					wtno: ''
				},  
				list: [],
				isCheckAll: false, 
				flag: false,
				truckname: uni.getStorageSync("nickName")
			};
		},
		onLoad() {
			this.getOptions()
		},
		methods: {
			getOptions() {  
				this.getList()
			},
			getProjectNum() { 
				return Date.now();
			},
			getRandom(len, max) {
			      var arr = [];
			      var result = "";
			      var count = 0;
			      while (count < len) {
			        var n = Math.floor(Math.random() * max + 1);
			        if (arr.join().indexOf(n) == -1) {
			          arr.push(n);
			          count++;
			        }
			      }
			      for (let index = 0; index < arr.length; index++) {
			        result = result + arr[index];
			      }
			      return result;
			}, 
			getList() {
				if (this.formData.wtno == '')
					return uni.showToast({
						title: '请输入委托号或者箱号',
						icon: 'none'
					})
				uni.showLoading({
					title: '加载中...'
				})
					uni.request({
						url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/JhixVZg1PKTLqVZ?truckname=' + this.truckname +
							'&xh='+this.formData.xh+'&wtno=' + this.formData.wtno,
						method: "get",
						success: (res) => {
							this.isCheckAll = false
							res.data.rows.forEach((item) => {
								item.checked = false
							})
							this.list = res.data.rows
							 uni.hideLoading()
						}
					});
			},  
			carCodeConfirm(e) {
				this.formData.carCode = e[0]
				this.formData.phone = e[0].value
			}, 
			onSearch() {
				this.getList()
			},
			selectitem(item) {
				if (item.checked == false) {
					item.checked = true
				} else {
					item.checked = false
				}
			},
			tapSelAll() {
				if (this.isCheckAll) {
					this.list.forEach((item) => {
						item.checked = false
					})
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
					this.list.forEach((item) => {
						item.checked = true
					})
				}
			}, 
			getNum(){
				var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
				var nums="";
				for(var i=0;i<32;i++){
				var id = parseInt(Math.random()*61);
				nums+=chars[id];
				}
				return nums;
			},
			tapSubmit() {
				if (this.flag) return
				let checkList = []
				let allcount=0
				this.list.forEach((item) => { 
					if (item.checked) {
						checkList.push(item.ID)
						if(item.XC=="20"){
							allcount+=20;
						}else{
							allcount+=40;
						} 
					} 
				})

				if (checkList.length == 0 || this.list.length == 0 || allcount==0){
					return uni.showToast({
						title: '请选择数据',
						icon: 'none'
					})
					
				}
  
				this.flag = true
				let orderno="SZGJXCX"+this.getProjectNum()+this.getRandom(4,9);
				uni.request({
							url: 'https://pay.zlkj-port.com/paysys/online_pay/zlkj/pay/preorder',
							data: {
								"req_time":Date.now(),
								"version":"3.0",
								"out_org_code":"OP00000397",
								"req_data":{
								    "merchant_no":"82230604214008D",
								    "term_no":"F2034382",
								    "out_trade_no":orderno,
								    "account_type":"WECHAT",
								    "trans_type":71,
								    "total_amount":allcount*100,
									//"total_amount":1,
								    "location_info":{
								        "request_ip":"119.45.9.131"
								    },
								    "notify_url":"",
								    "acc_busi_fields":{
								        "sub_appid":"wx8c96ae29e572f561",
								        "user_id":uni.getStorageSync("userInfo").openid,
								        "attach":""
								    }
								}
							},  
							method: "POST",
							success: (res) => {
								this.flag = false
								console.log(res); 
								if(res.data.msg=="验签成功"){
									let resdata=  JSON.parse(res.data.source.substr(res.data.source.indexOf("{"),res.data.source.length))
									console.log(resdata.resp_data.acc_resp_fields.time_stamp); 
									console.log(resdata.resp_data.acc_resp_fields.nonce_str); 
									console.log(resdata.resp_data.acc_resp_fields.package); 
									 
									////////////////////////////////////////////
									wx.requestPayment
									(
										{
											"timeStamp": resdata.resp_data.acc_resp_fields.time_stamp,
											"nonceStr": resdata.resp_data.acc_resp_fields.nonce_str,
											"package": resdata.resp_data.acc_resp_fields.package,
											"signType": "RSA",
											"paySign":resdata.resp_data.acc_resp_fields.pay_sign,
											"success":function(res){
												console.log(res); 
												uni.showToast({
													title: '支付成功'
												}) 
												uni.request({
													url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/70OlogUHZZxxZUo?ordername=小程序办单付费&recnam='+uni.getStorageSync("nickName")+'&orderno='+orderno+'&amount='+allcount+'&trucktaskid='+checkList.toString()+'&id='+checkList.toString(),
												    method: "get",
													success: (res) => { 
														setTimeout(() => {
														   this.getList()
														}, 1000)
													}
												})
											},
											"fail":function(res){
												uni.showToast({
													title: "支付失败2",
													icon: 'none'
												}) 
											},
											"complete":function(res){}
										}
									)
								}else{
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									}) 
								} 
								// console.log(res.data.source.substr(0,res.data.source.indexOf("{")))
								// let resdata=  JSON.parse(res.data.source.substr(res.data.source.indexOf("{"),res.data.source.length))
							 
								// uni.showToast({ 
								// 	title: resdata.msg
								// })  
								//resdata.resp_data.acc_resp_fields.redirect_url 
								//https://qr.test.95516.com/UP02/qrcGtwWeb-web/front/confirmOrder?sessionId=4e5dc339f0b746318e7ec6e7c50fd61d
								// let url = encodeURIComponent("https://qr.test.95516.com/UP02/qrcGtwWeb-web/front/confirmOrder?sessionId=4e5dc339f0b746318e7ec6e7c50fd61d")
								// uni.navigateTo({ 
								// 	url:'../otherpage/webView?url='+url 
								// })
								
								
								// setTimeout( () => {
								//    this.getList()
								// }, 1000)
							},
							fail() {
								this.flag = false
								uni.showToast({
									title: "支付失败1",
									icon: 'none'
								}) 
							}
						})   
			}  
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}
	page {
		background-color: #F2F1F9;
	}
	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}

	.listCon {

		.listItem {
			margin-left:10px;
			padding: 20rpx;
			border-bottom: 1px solid $u-border-color;
			display: flex;
			align-items: center;

			

			.infoCon {
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				.cellItem {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.label {}
				}
				.labelTag {
					background-color: #E0EDFB;
					color: #4C86E7; 
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}
				.checkBox {}
			}
		}
	}
</style>
